<template>
  <div class="market-bazaar">
    <div class="section-header">
      <h3>
        <i class="fas fa-store-alt"></i>
        <span>昌欣集市</span>
      </h3>
      <NuxtLink to="/bazaar" class="more-link">
        <span>进入集市</span>
        <i class="fas fa-angle-double-right"></i>
      </NuxtLink>
    </div>
    
    <div class="bazaar-content">
      <!-- 左侧说明区域 -->
      <div class="bazaar-intro">
        <div class="intro-main">
          <h4>帮助农民销售自产农货</h4>
          <p class="intro-desc">
            昌欣集市是专为农户打造的交易平台，通过移动+PC端，简化农户卖货流程，增加农户宣传，帮助农户提前预告上市，直接通过交易码完成交易。
          </p>
        </div>
        
        <div class="intro-features">
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-mobile-alt"></i>
            </div>
            <div class="feature-content">
              <h5>移动+PC端</h5>
              <p>支持多端访问，随时随地交易</p>
            </div>
          </div>
          
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-qrcode"></i>
            </div>
            <div class="feature-content">
              <h5>扫码交易</h5>
              <p>专属交易码，扫码即可快速下单</p>
            </div>
          </div>
          
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-calendar-check"></i>
            </div>
            <div class="feature-content">
              <h5>提前预告</h5>
              <p>农户可提前发布上市信息，对接采购需求</p>
            </div>
          </div>
          
          <div class="feature-item">
            <div class="feature-icon">
              <i class="fas fa-handshake"></i>
            </div>
            <div class="feature-content">
              <h5>简化流程</h5>
              <p>降低使用门槛，让农户轻松上手</p>
            </div>
          </div>
        </div>
        
      </div>

      <!-- 右侧农户展示区域 -->
      <div class="bazaar-showcase">
        
        <div class="farmer-cards">
          <div 
            v-for="farmer in displayFarmers" 
            :key="farmer.id"
            class="farmer-card"
          >
            <div class="card-header">
              <div class="avatar-wrapper">
                <img :src="farmer.avatar" :alt="farmer.name" />
              </div>
              <div class="farmer-name">{{ farmer.name.charAt(0) }}***</div>
              <div class="product-type">
                <span class="type-tag">{{ farmer.product.variety }}</span>
                <span class="strain-tag">{{ farmer.product.strain }}</span>
              </div>
            </div>
            
              <div class="card-body">
                <div v-if="farmer.isPreview" class="preview-section">
                  <div class="preview-date">预计上市 {{ farmer.previewDate }}</div>
                </div>
                
                <div v-else class="price-section">
                  <div class="price-main">
                    <span class="currency">¥</span>
                    <span class="amount">{{ farmer.product.price }}</span>
                  </div>
                  <div class="price-sub">/{{ farmer.product.unit }}</div>
                </div>
                
                <div class="stock-section">
                  <span class="stock-label">预计</span>
                  <span class="stock-value">{{ farmer.product.quantity }}{{ farmer.product.unit }}</span>
                </div>
              </div>
            
            <div class="card-footer">
              <div class="location-info">
                <i class="fas fa-map-marker-alt"></i>
                <span>{{ formatLocation(farmer.location) }}</span>
              </div>
              <div class="code-info">
                <span>{{ farmer.transactionCode }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 格式化地区显示：省+县区，例如：湖北省十堰市郧阳区 -> 湖北郧阳
const formatLocation = (location) => {
  if (!location) return ''
  
  // 提取省份（去掉"省"字）
  const provinceMatch = location.match(/^(\w{2,3})省/)
  const province = provinceMatch ? provinceMatch[1] : ''
  
  // 提取县区级地名（去掉"区"、"县"、"市"后缀）
  const countyPatterns = [
    /(\w{2,3})区/,      // 匹配XX区
    /(\w{2,3})县/,      // 匹配XX县
    /(\w{2,3})市(?!.*市)/, // 匹配最后一个XX市（县级市）
  ]
  
  let county = ''
  for (const pattern of countyPatterns) {
    const match = location.match(pattern)
    if (match) {
      county = match[1]
      break
    }
  }
  
  // 组合省+县区
  if (province && county) {
    return `${province}${county}`
  }
  
  // 如果提取失败，返回原始地名的简化版本
  return location.replace(/省|市/g, '').slice(0, 6)
}

const displayFarmers = [
  {
    id: 1,
    name: '张农户',
    phone: '138****1234',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-1.jpg',
    transactionCode: 'YX2024001',
    isPreview: true,
    previewDate: '2024-02-15',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 1000,
      unit: '斤',
      price: 15,
      sold: 312.6,
      image: '/images/bazaar/mushroom1.jpg'
    }
  },
  {
    id: 2,
    name: '李农户',
    phone: '139****5678',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-2.jpg',
    transactionCode: 'YX2024002',
    isPreview: true,
    previewDate: '2024-02-20',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 800,
      unit: '斤',
      price: 16,
      sold: 0,
      image: '/images/bazaar/mushroom2.jpg'
    }
  },
  {
    id: 3,
    name: '王农户',
    phone: '137****9012',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-3.jpg',
    transactionCode: 'YX2024003',
    isPreview: true,
    previewDate: '2024-02-25',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 1200,
      unit: '斤',
      price: 14.5,
      sold: 0,
      image: '/images/bazaar/mushroom3.jpg'
    }
  },
  {
    id: 4,
    name: '赵农户',
    phone: '136****3456',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-4.jpg',
    transactionCode: 'YX2024004',
    isPreview: true,
    previewDate: '2024-03-01',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 1500,
      unit: '斤',
      price: 15.5,
      sold: 187.5,
      image: '/images/bazaar/mushroom4.jpg'
    }
  },
  {
    id: 5,
    name: '钱农户',
    phone: '135****7890',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-1.jpg',
    transactionCode: 'YX2024005',
    isPreview: true,
    previewDate: '2024-03-05',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 900,
      unit: '斤',
      price: 16.2,
      sold: 0,
      image: '/images/bazaar/mushroom5.jpg'
    }
  },
  {
    id: 6,
    name: '孙农户',
    phone: '134****2345',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-2.jpg',
    transactionCode: 'YX2024006',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 1100,
      unit: '斤',
      price: 15.8,
      sold: 301.3,
      image: '/images/bazaar/mushroom6.jpg'
    }
  },
  {
    id: 7,
    name: '周农户',
    phone: '133****6789',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-3.jpg',
    transactionCode: 'YX2024007',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 950,
      unit: '斤',
      price: 15.2,
      sold: 0,
      image: '/images/bazaar/mushroom7.jpg'
    }
  },
  {
    id: 8,
    name: '吴农户',
    phone: '132****0123',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-4.jpg',
    transactionCode: 'YX2024008',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 1300,
      unit: '斤',
      price: 16.5,
      sold: 450.8,
      image: '/images/bazaar/mushroom8.jpg'
    }
  },
  {
    id: 9,
    name: '郑农户',
    phone: '131****4567',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-1.jpg',
    transactionCode: 'YX2024009',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 850,
      unit: '斤',
      price: 14.8,
      sold: 0,
      image: '/images/bazaar/mushroom9.jpg'
    }
  },
  {
    id: 10,
    name: '刘农户',
    phone: '130****8901',
    location: '湖北十堰郧阳区',
    avatar: '/images/farmer-avatar-2.jpg',
    transactionCode: 'YX2024010',
    product: {
      variety: '香菇',
      strain: '808',
      quantity: 1150,
      unit: '斤',
      price: 15.6,
      sold: 298.7,
      image: '/images/bazaar/mushroom10.jpg'
    }
  }
]
</script>

<style lang="scss" scoped>
.market-bazaar {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    
    h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #333;
      
      i {
        color: #e4393c;
        font-size: 22px;
      }
    }
    
    .more-link {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #666;
      font-size: 14px;
      text-decoration: none;
      transition: all 0.3s;
      
      &:hover {
        color: #e4393c;
      }
    }
  }
  
      .bazaar-content {
        display: flex;
        gap: 20px;
        align-items: stretch;
        animation: fadeInUp 0.8s ease-out;
        
        @include tablet {
          flex-direction: column;
          gap: 15px;
        }
      }
  
  .bazaar-intro {
    flex: 0.5;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    
        .intro-main {
          margin-bottom: 12px;
          
          h4 {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 600;
            color: #333;
            line-height: 1.4;
          }
          
          .intro-desc {
            margin: 0;
            color: #666;
            font-size: 14px;
            line-height: 1.5;
          }
        }
    
    .intro-features {
      .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .feature-icon {
          width: 28px;
          height: 28px;
          background: #e4393c;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          
          i {
            font-size: 12px;
            color: #fff;
          }
        }
        
            .feature-content {
              flex: 1;
              
              h5 {
                margin: 0 0 3px;
                font-size: 14px;
                font-weight: 600;
                color: #333;
                line-height: 1.3;
              }
              
              p {
                margin: 0;
                font-size: 12px;
                color: #666;
                line-height: 1.4;
              }
            }
      }
    }
  }
  
  .bazaar-showcase {
    flex: 1.5;
    
    .farmer-cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      
      @include tablet {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      
      @include mobile {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      
      .farmer-card {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        overflow: hidden;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        height: 100%;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          border-color: #e4393c;
        }
        
        .card-header {
          padding: 8px;
          display: flex;
          align-items: center;
          gap: 6px;
          background: #fafafa;
          border-bottom: 1px solid #f0f0f0;
          
          .avatar-wrapper {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          
          .farmer-name {
            font-size: 11px;
            font-weight: 600;
            color: #333;
            flex: 1;
          }
          
          .product-type {
            display: flex;
            gap: 3px;
            margin-left: auto;
            
            .type-tag {
              background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
              color: #fff;
              padding: 2px 6px;
              border-radius: 8px;
              font-size: 9px;
              font-weight: 600;
              box-shadow: 0 1px 3px rgba(238, 90, 111, 0.3);
            }
            
            .strain-tag {
              background: linear-gradient(135deg, #ffd93d 0%, #ffb347 100%);
              color: #333;
              padding: 2px 6px;
              border-radius: 8px;
              font-size: 9px;
              font-weight: 600;
              box-shadow: 0 1px 3px rgba(255, 179, 71, 0.3);
            }
          }
        }
        
            .card-body {
              padding: 10px 8px;
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              
              .preview-section {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-bottom: 8px;
                padding: 8px;
                background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
                border-radius: 8px;
                border: 1px solid #e0f0e0;
                
                .preview-date {
                  font-size: 12px;
                  font-weight: 600;
                  color: #2E7D32;
                  text-align: center;
                  background: #fff;
                  padding: 6px 10px;
                  border-radius: 6px;
                  border: 1px solid #4CAF50;
                  box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
                }
              }
              
              .price-section {
                display: flex;
                align-items: baseline;
                justify-content: center;
                margin-bottom: 6px;
                
                .price-main {
                  display: flex;
                  align-items: baseline;
                  
                  .currency {
                    font-size: 14px;
                    font-weight: 600;
                    color: #e4393c;
                  }
                  
                  .amount {
                    font-size: 22px;
                    font-weight: 700;
                    color: #e4393c;
                    line-height: 1;
                  }
                }
                
                .price-sub {
                  font-size: 10px;
                  color: #999;
                  margin-left: 2px;
                }
              }
              
              .stock-section {
                text-align: center;
                font-size: 10px;
                color: #666;
                
                .stock-label {
                  color: #999;
                  margin-right: 4px;
                }
                
                .stock-value {
                  font-weight: 600;
                  color: #666;
                }
              }
            }
        
        .card-footer {
          background: #fafafa;
          padding: 6px 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #f0f0f0;
          font-size: 9px;
          color: #666;
          
          .location-info {
            display: flex;
            align-items: center;
            gap: 3px;
            
            i {
              font-size: 9px;
              color: #999;
            }
            
            span {
              font-size: 9px;
              color: #666;
            }
          }
          
          .code-info {
            span {
              font-family: monospace;
              font-weight: 600;
              font-size: 9px;
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>
